<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户中心_趣玩</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, legend, input, textarea, blockquote, img, button {
      padding: 0;
      margin: 0;
    }
    html{
      color: #333;
    }
    html body{
      background: #ccc;
      min-height: 600px;
      padding-bottom: 50px;
    }
    body, button, input, select, textarea {
      font: 12px/1.5 "Microsoft YaHei"
    }
    div{
      overflow: hidden;
    }
    a{
      text-decoration: none;
    }
    .gold{
      background: #b4a078;
      color: #fff;
    }
    .center {
      margin-left: auto;
      margin-right: auto;
    }
    .login_logo img{
      width: 30px;
      height: 30px;
    }
    .login_logo a{
      margin-top: 0;
      vertical-align: top;
      margin-right: 20px;
      display: inline-block;
      width: 30px;
      height: 30px;
      overflow: hidden;
    }


  </style>
</head>
<body>
<div id="login">
  <el-container>
    <!--  登录   -->
    <el-header style="width: 100%;height: auto;background-color:white;
                   box-shadow: 1px 1px 5px;padding: 0">
      <!-- 页头居中内容 -->
      <div class="center" style="width: 980px;height: 60px;padding: 20px 0;" >
        <!--  趣玩logo超链接  -->
        <div style="float: left;margin-left: 10px;">
          <a href="./" style="width: 400px;">
            <img style="width: 132px;height: 57px" src="https://quwan.com/themes/mb5_com_cn/images/logo.gif" alt="">
          </a>
        </div>

        <!--  注册跳转   -->
        <p style="float:right; height: 22px;line-height: 20px;margin-top:36px;text-align: right;font-size: 14px">如未注册,点击
          <a href="/login.html" class="gold"
              style="width: 49px;height: 22px;border-radius: 2px;
                       margin-left: 6px;display: inline-block;
                       text-align: center">注册
          </a>
        </p>
      </div>
    </el-header>
    <!--                       登录页体          -->
    <el-main class="center" style="width: 980px;border-radius: 5px;background-color: white;
                        box-shadow: 1px 1px 5px;margin-top: 50px;padding: 0">
      <!--       用户登录                -->
    <ul>
      <li style="text-align: center;color: #b4a078;font-size: 18px;
                           border-bottom: 1px solid;float: left;height: 56px;
                           line-height: 56px;width: 100%"><i class="el-icon-user"></i>会员登录</li>
      <li style="text-align: center;color: #b4a078;font-size: 18px;
                           border-bottom: 1px solid;float: left;height: 56px;
                           line-height: 56px;width: 100%"><i class="el-icon-mobile-phone"></i>手机动态密码登录</li>
    </ul>

      <!--   表单信息        -->
      <div style="width: 100%;">
        <el-form label-width="60px" style="width: 400px;margin: 50px auto">
          <el-form-item>
            <el-input type="text" v-model="user.username" placeholder="用户名、手机、邮箱"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input type="password" v-model="user.password" placeholder="密码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-checkbox>请保存我这次的登录信息。</el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button class="gold"
                       style="width:100%;padding: 15px 0;height: 48px;
                                  text-align: center;font-size: 18px;margin: 0;"
                       @click="login()">登录
            </el-button>
          </el-form-item>


          <!--其他登录方式-->
          <el-form-item>
            <div style="height: 50px;line-height: 50px;font-size: 14px;">
              使用第三方账号登录
            </div>
            <div class="reg_logo">
              <a href=""><img src="/imgs/qqlogo.png" alt=""></a>
              <a href=""><img src="/imgs/weixinlogo.png" alt=""></a>
              <a href=""><img src="/imgs/weibologo.png" alt=""></a>
              <a href=""><img src="/imgs/meituanlogo.png" alt=""></a>
            </div>
          </el-form-item>


        </el-form>
      </div>



    </el-main>
  </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el:'#login',
    data:function (){
      return{
        user:{
          username:"",
          password:""
        }
      }
    },
    methods:{

    }
  })
</script>
</html>